<template>
  <div>
    <div class="card">
        <div class="top">
          <img src="@/assets/home/bzbf23@2x.png">
          <div class="tright">
            <div class="trightt">
              <span>孙卫东</span>
              <span>首席分析师</span>
              <div><img src="@/assets/a-Frame212.png" alt=""> 关注</div>
            </div>
            <div class="trightb">从业资格号：F3005393 &nbsp;&nbsp;&nbsp;&nbsp; 投资咨询号：Z0012069</div>
            <!-- <div class="trightb">投资咨询号：Z0012069</div> -->
          </div>
        </div>
        <div class="center">
          <div>玉米</div>
          <div>玉米淀粉</div>
        </div>
        <div class="bottom" title="金融学和理学双硕士，毕业于美国堪萨斯大学金">
          金融学和理学双硕士，毕业于美国堪萨斯大学金融学和理学双硕士，毕业于美国堪萨斯大学金融学和理学双硕士，毕业于美国堪萨斯大学金融学和理学双硕士，毕业于美国堪萨斯大学
        </div>
    </div>
    <Activity/>
    <TopStories/>
    <Report/>
  </div>
</template>

<script setup lang="ts">
import Activity from './components/Activity.vue';
import Report from './components/Report.vue';
import TopStories from './components/TopStories.vue';
</script>


<style scoped lang="less">
  .card {
    margin: 10px 0;
    width: 100%;
    border-radius: 20px;
    padding: 2.5rem;
    box-sizing: border-box !important;
    border: 1px solid rgba(1, 2, 3, 0);
      // background: linear-gradient( 180deg, #EFF6FF 0%, #FBFDFE 100%);
      background-image: url('@/assets/grzybj.png');
      background-repeat: no-repeat;
      background-size: cover;
    .top {
      display: flex;
      border-bottom: 1px solid #F0F4FF;
      padding: 0 0 1.25rem 0;
      margin-bottom: .625rem;
      >img {
        width: 70px;
        height: 70px;
        margin:7px 15px 0 0;
      }
      .tright {
        width: 100%;
        padding: 15px 0 0 0;
        .trightt {
          display: flex;
          align-items: center;
          margin-bottom: .625rem;
          position: relative;
          >:nth-child(1) {
            font-size: 16px;
            color: #0F142C;
            margin-right: 1.875rem;
            font-weight: 600;
          }
          >:nth-child(2) {
            font-size: 14px;
          }
          >:nth-child(3) {
            position: absolute;
            right: 0;
            padding: 4px 8px;
            background-color: @color-1356FF;
            border-radius: 4px;
            font-size: 14px;
            color: white;
            display: flex;align-items: center;
            gap: .375rem;
          }
        }
        .trightb {
          font-size: 12px;
          color: #868D98;
          margin-bottom: .3125rem;
        }
      }

    }
    .center {
      display: flex;
      flex-wrap: wrap;
      gap: .625rem;
      margin-bottom: .9375rem;
      >div {
        background: #F2F6FF;
        border-radius: 12px;
        font-size: 12px;
        color: @color-1356FF;
        padding: 1px 10px;
      }
    }
    .bottom {
      color: #636976;
      font-size: 14px;
      display: -webkit-box;
  -webkit-line-clamp: 2;    /* 限制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  // max-width: 300px;
    }
  }
</style>